<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>列表</title>
    <link href="__STATIC__/component/pear/css/pear.css" rel="stylesheet"/>
    {include file='public/head.html'}
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="currentTable" lay-filter="currentTable"
               data-auth-add="{:check_auth('add')}"
               data-auth-edit="{:check_auth('edit')}"
               data-auth-delete="{:check_auth('del')}"
               data-auth-modify="{:check_auth('multi')}"
        ></table>
    </div>
</div>

<script type="text/html" id="table-toolbar">
    <button class="layui-btn layui-btn-sm aphp-btn-primary" data-table-refresh="currentTable">
        <i class="layui-icon layui-icon-refresh"></i>
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        <span class="layui-hide-xs"> 新增</span>
    </button>
    <button class="layui-btn layui-btn-normal layui-btn-sm" id="openAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        <span class="layui-hide-xs"> 展开或折叠</span>
    </button>
</script>

<script type="text/html" id="table_title">
    {{ d.title }} ({{ d.tree_count }})
</script>

<script src="__STATIC__/component/layui/layui.js"></script>
<script src="__STATIC__/component/pear/pear.js"></script>
<script>
    layui.use(['table','form','aphp', 'treeTable', 'aphpTable'],function () {
        var $ = layui.$;
        var treeTable = layui.treeTable;
        var aphpTable = layui.aphpTable;
        var aphp = layui.aphp;
        var table = layui.table;

        var init = {
            table_elem: '#currentTable',
            table_render_id: 'currentTable',
            add_url: "{:url('add')}",
            edit_url: "{:url('edit')}",
            delete_url: "{:url('del')}",
            modify_url: "{:url('multi')}",
        };

        treeTable.render({
            init: init,
            id: 'currentTable',
            elem: init.table_elem,
            toolbar: '#table-toolbar',
            response: {statusCode: 200},
            url: "{:url('index')}",
            tree: {
                customName: {
                    children:'children',
                    pid:'pid',
                    name:'title'
                },
                view:{
                    showIcon:false
                }
            },
            escape:false,
            cols: aphpTable.colsFormat([[
                { title: '排序', field: 'sort',edit:'text' },
                { title: 'ID', field: 'id' },
                { title: '标题', field: 'title', width: 160, templet: '#table_title' },
                { title: '标识', field: 'sign', width: 120 },
                { title: '类型', field: 'type', templet: aphpTable.formatter.flag, selectList: {1: '单页',2: '列表',3: '外链'} },
                { title: '模板', field: 'tpl'},
                { title: '模型', field: 'model_id', templet: aphpTable.formatter.flag, selectList: {:select_list(widget('model_select')->get())}},
                { title: '显示', field: 'is_show', templet: aphpTable.formatter.switch, selectList: { 0: '否', 1: '是' },tips: '是|否' },
                { title: '更新时间', field: 'update_time', templet: aphpTable.formatter.datetime },
                { title: '状态', field: 'status', align: 'center', unresize: true, templet: aphpTable.formatter.switch },
                { title: '操作', align: 'center', width: 120, templet: aphpTable.formatter.tool, operat: ['edit','delete']}
            ]], init),
        });

        //顶部工具
        table.on('toolbar(currentTable)', function(obj){
            if(obj.event === 'add'){
                aphp.open('新增', "{:url('add')}", 800, 600);
            }
        });

        $(document).on('click', '#openAll', function () {
            var that = this;
            var show = $("i", that).hasClass("layui-icon-spread-left");
            treeTable.expandAll("currentTable", show);
            $("i", that).toggleClass("layui-icon-spread-left", !show);
            $("i", that).toggleClass("layui-icon-shrink-right", show);
        });

        aphpTable.listenSwitch({filter: 'is_show', url: init.modify_url});
        aphpTable.listenSwitch({filter: 'status', url: init.modify_url});
        aphpTable.listenFieldEdit(init, 'currentTable', init.table_render_id, true);
        aphpTable.bindEvent();
    });
</script>
</body>
</html>